<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <div id=app>
        <h1 v-once>v-once:!!!!!{{name.firstName}}---{{name.lastName}}</h1>
        <span>单向数据绑定：<input type="text" :value='input1'><span v-text="input1">v-text指令会替换掉{{}}中的内容</span></span>
        <span>双向数据绑定：<input type="text" v-model='input1'><span>{{input1}}</span></span>
        <br/>
        <span v-pre>v-pre:{{arr1[0]}}</span>
        <span>{{arr1[0]}}</span>
        <span v-html="htmlData">---</span>
        <hr/>
        <form @submit.prevent="userDataSubmit">
            编号：<input type="number" v-model.number='userData.id'/><br/>
            姓名：<input type="text" v-model='userData.name'/><br/>
            年龄：<input type="number" v-model.number='userData.age'/><br/>
            <button>提交</button>
        </form>
        <span>{{userData.id | userDataId}}--{{userData.name | userDataName(':')}}--{{userData.age}}</span>
        <hr/>
        <input type="text" v-model='keyWord'>
        <h2 v-for="item of newUser" :key="item.id">{{item.name}}---{{item.age}}</h2>
        <button @click="sortType = 1">年龄升序</button>
        <button @click="sortType = 2">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(item,index) of newUser2" :key="item.id">{{index+1}}-{{item.name}}--{{item.age}}<input/></li>
        </ul>
        <ul>
            <li v-for="(value,index) of name" :key="index">{{value}}</li>
        </ul>
        <ul>
            <li v-for="(value,index) of userName" :key="index">{{value}}</li>
        </ul>
        <ul>
            <li v-for="(value,index) of 3" :key="index">{{value}}</li>
        </ul>
        <hr/>
        <button @click="flag = !flag">T--F</button>
        <h3 v-if="flag">v-if:flag---->{{flag}}
            <span>false---直接不渲染</span>
        </h3>
        <h3 v-show="flag">v-show:flag---->{{flag}}
            <span>false---渲染，但不显示(相当于标签中存在 style="display: none;")</span>
        </h3>
        <hr/>
        <button @click="alert1('参数1',$event)">点我！！</button>
        <a href="/" @click.prevent="alert2">点我！！</a>
        <button @click.once="alert3">点我！！</button>
        <hr/>
        姓：<input type="text" v-model="name.firstName">
        名：<input type="text" v-model="name.lastName">
        <h6>{{name.firstName}}---{{name.lastName}}</h6> 
        <h6>{{thisName()}}</h6>
        <h6>{{fullName}}</h6>
        <h6>{{userName}}</h6>
        <button @click="fullName = ''">清空fullName</button>
        <hr/>
        <h2 @click="operateIsHot">点我：{{isHot}}---{{isHotData}}</h2>
        <hr/>
        <h1 :style="{opacity}">我是你爸爸！！！</h1>
        <app1></app1>
        <app2></app2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const app1 = Vue.extend({
            template:`
                        <div>
                            <h1>{{name}}</h1>
                        </div>
                    `,
            data() {
                return {
                    name:'app1'
                }
            },
        })

        const app3 = Vue.extend({
            template:`
                        <div>
                            <h3>{{name}}</h3>
                        </div>
                    `,
            data() {
                return {
                    name:'app3'
                }
            },
        })

        const app2 = {
            template:`
                        <div>
                            <h1>{{name}}</h1>
                            <app3/>
                        </div>
                    `,
            components:{
                app3,
            },
            data() {
                return {
                    name:'app2'
                }
            },
        }
        Vue.component('app2',app2)

        console.log(app1)
        console.log(app3)
        console.log(app2)
        console.log('@')

        //创建Vue实例
        const vm = new Vue({
            el:'#app',//指定容器   容器与实例一一对应
            components:{
                app1:app1,
            },
            data:{//存储数据
                input1:'',
                arr1:[1,2,3],
                user:[
                    {
                        id:1,
                        name:'张三',
                        age:22
                    },
                    {
                        id:2,
                        name:'李四',
                        age:19
                    },
                    {
                        id:3,
                        name:'王五',
                        age:25
                    },
                ],
                userData:{
                    id:null,
                    name:'',
                    age:null
                },
                newUser:[],
                flag:true,
                name:{
                    firstName:'歪比',
                    lastName:'巴布',
                },
                userName:'---',
                isHot:true,
                keyWord:'',
                sortType:0,
                glqData:'',
                htmlData:'<br/>1000',
                opacity:1,
            },
            methods:{//存储方法
                alert1(data,event) {
                    console.log(event)
                    console.log(event.target)
                    alert('歪比巴布！！！'+data)
                },
                alert2() {
                    alert('歪比巴布！！！')
                },
                alert3() {
                    alert('歪比巴布！！！')
                },
                thisName(){
                    return this.name.firstName + '---' + this.name.lastName
                },
                operateIsHot(){
                    this.isHot = !this.isHot
                },
                userDataSubmit(){
                    console.log(JSON.stringify(this.userData))
                    this.user.push(this.userData)
                }
            },
            computed:{//计算属性
                fullName:{
                    get:function () {//初始化被调用；所依赖的数据发生改变，被调用
                        console.log('fullName-get')
                        return this.name.firstName + '---' +this.name.lastName
                    },
                    set(){//当fullName被修改时被调用
                        console.log('fullName-set')
                        this.name.firstName = ''
                        this.name.lastName = ''
                    }
                },
                isHotData(){
                    return this.isHot?'状态1':'状态2'
                },
                newUser2:{
                    get(){
                        console.log('2-keyWord被更改！'+this.keyWord)
                        let arr = this.user.filter(item=>{
                            return item.name.indexOf(this.keyWord) !== -1
                        })
                        if(this.sortType === 0) return arr
                        arr.sort((a,b)=>{
                            if(this.sortType === 1){
                                return a.age - b.age
                            }
                            return b.age - a.age
                        })
                        return arr
                    }
                }
            },
            filters:{//过滤器
                userDataId(value){
                    return 'id:'+(value == null ?'':value)
                },
                userDataName(value,p='--'){
                    return 'name'+ p +(value == null ?'':value)
                }
            },
            watch:{//侦听器
                isHot:{
                    immediate:true,//设置页面初始化就调用一次

                    handler(newValue,proValue){//isHot发生改变时调用
                        console.log('isHot改变了:'+newValue,proValue)
                    }
                },
                name:{
                    immediate:true,//初始化调用一次
                    deep:true,//监听多层对象
                    handler(){
                        console.log('watch-name')
                        this.userName = this.name.firstName + '---' + this.name.lastName
                    }
                },
                keyWord:{
                    immediate:true,
                    handler(value){
                        console.log('1-keyWord被更改！'+value)
                        this.newUser =  this.user.filter((item)=>{
                            return item.name.indexOf(value) !== -1
                        })
                    }
                }
            },
            mounted() {//页面挂载完毕后调用（一次）
                //初始化定时器并存储定时器
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if(this.opacity < 0) this.opacity = 1
                }, 20);
            },
            beforeDestroy() {//卸载vue实例之前调用(一次)
                //清除定时器
                clearTimeout(this.timer)
            },
        })
        console.log(vm)

        console.log('&&&')
        console.log(app1.prototype.__proto__ === vm.__proto__)
        console.log(app1.prototype.__proto__ === Vue.prototype)
        console.log(app1 === app3)
        console.log(app1.prototype === app3.prototype)
        console.log(app1.prototype.__proto__ === app3.prototype.__proto__)
        console.log(app2)
        console.log('&&&')
    </script>
    <div>
        <button onclick="addData()">添加本地存储</button>
    </div>
    <script type="text/javascript">
        
        function addData(){
            localStorage.setItem('内容1','123456')
        }
    </script>
</body>
</html>